<script setup>
import { ref, reactive, computed, watchEffect } from 'vue'
import { ElMessage, dayjs } from 'element-plus'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import isBetween from 'dayjs/plugin/isBetween'
import "dayjs/locale/zh-cn";
dayjs.extend(isBetween)
dayjs.extend(customParseFormat)
dayjs.locale('zh-cn')

const emits = defineEmits(["cancel","update"])
const props = defineProps({
  sessionInfo: Object,
  dateRanges:[]
});
const info = reactive({
  content: ['0:00', '23:55'],
})

watchEffect(
  () => {
    if (props.sessionInfo == null) {
      info.data = {
        sessionId: null,
        sessionName: null,
        startTime: null,
        endTime: null,
        courseContents: ['08:00-10:00','10:00-12:00','14:00-16:00','16:00-18:00','19:00-21:00'],
      }
    } else {
      info.data = props.sessionInfo      
    }
    info.contents = []  
    info.time = [info.data.startTime, info.data.endTime]
    info.data.courseContents.map(v => {
      info.contents.push(v.split('-'))
    })

  }
  
)

const contents = ref(Array.of(['08:00', '10:00'], ['10:00', '12:00'], ['14:00', '16:00'], ['16:00', '18:00'], ['19:00', '21:00']))

const disableSeconds = () => {
  return [...new Array(60).keys()]
}
const addContent = () => {
  let [s, t] = info.content
  let ss = dayjs(s, 'HH:mm')
  let tt = dayjs(t, 'HH:mm')

  if (tt.isAfter(ss)) {

    let check = contents.value.some(([s1, t1]) => {
      let ss1 = dayjs(s1, 'HH:mm')
      let tt1 = dayjs(t1, 'HH:mm')
      // ss ss1 tt tt1 -> true
      // ss ss1 tt1 ss -> true
      // ss tt ss1 tt1 ->false
      // ss1 tt1 ss tt ->false
      if (!ss1.isBefore(tt) || !ss.isBefore(tt1)) {
        console.log(ss, tt, ss1, tt1)
        return false
      }
      return true
    })
    if (check === false) {
      // 此时可以插入
      contents.value.push(info.content)
      contents.value.sort(([s1,], [s2,]) => {
        return dayjs(s1).isAfter(dayjs(s2)) ? 1 : -1
      })
      // 恢复出厂设置
      info.content = [t, '23:55']
      return
    }
  }
  ElMessage({
    message: `选择的时间 ${s}-${t} 与存在的节次片存在冲突`,
    type: 'warning',
  })
}
const tagClose = (x) => {
  info.contents.splice(x, 1)

}
const clearContent = () => {
  info.contents = []
}
const defaultContent = () => {
  info.contents = Array.of(['08:00', '10:00'], ['10:00', '12:00'], ['14:00', '16:00'], ['16:00', '18:00'], ['19:00', '21:00'])
}
const disableMinutes = () => {
  return [...new Array(60).keys()].filter(v => v % 5 !== 0)
}

const sessionDateSelect = () => {
  let [s, t] = info.time
  s = dayjs(s)
  if (s.day() == 0) {
    s = s.day(-6)
  } else {
    s = s.day(1)
  }

  t = dayjs(t)
  if (t.day() != 0)
    t = t.day(7)
  info.time = [s, t]
  info.data.startTime = s
  info.data.startTime = t

  console.log(s, t)
}

const ok = () => {
  console.log('ok',info.data)
  emits('update', info.data)
}

</script>
<template>

  <div style="margin-left:50px;margin-right:30px">
    <el-form laebl-width="auto" style="width:60vw">
      <el-row :gutter="4">
        <el-col :span="8">
          <el-form-item label="学期名" required>
            <el-input v-model="info.data.sessionName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="4">
          <el-form-item label="学期始末时间" required>
            <el-date-picker v-model="info.time" type="daterange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" @change="sessionDateSelect"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="start" align="middle">
        <el-col :span="16">
          <div
            style="border: 1px dashed; padding:10px;display:flex; justify-content:space-around;flex-direction:column">
            <el-form-item label="学期节次设置" required>
              <el-time-picker v-model="info.content" is-range arrow-control range-separator="至" start-placeholder="开始时间"
                end-placeholder="结束时间" :disabled-seconds="disableSeconds" :disabled-minutes="disableMinutes"
                value-format="HH:mm" format="HH:mm" />

            </el-form-item>
            <el-form-item label="节次清单" label-position="top">
              <el-tag v-for="[s, t], index in info.contents" closable :key="t" @close="tagClose(index)"><span>{{ s }}-{{
                  t
                  }}</span></el-tag>
            </el-form-item>
          </div>
        </el-col>


        <el-col :span="4" :offset="2">
          <div style="padding:10px,20px">
            <el-button @click="addContent" type="primary" style="margin:10px; width:150px">
              添加到节次设置清单</el-button>
            <el-button @click="clearContent" type="warning" style="margin:10px; width:150px">清空节次设置清单</el-button>
            <el-button @click="defaultContent" type="info" style="margin:10px; width:150px">恢复节次默认清单</el-button>
          </div>

        </el-col>
      </el-row>
    </el-form>
    <div style="margin:10px">

      <el-button type="success" @click="ok">
        确认添加
      </el-button>
      <el-button @click="emits('cancel')">
        取消
      </el-button>
    </div>
  </div>
</template>